<%--
  Created by IntelliJ IDEA.
  User: zhanglh
  Date: 2019/9/17/017
  Time: 12:39
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>用户信息统计</title>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.12.4.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/echarts.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/china.js"></script>
</head>
<body>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="sex" style="width: 500px;height:500px;float:left;display:inline"></div>
<div id="date" style="width: 500px;height:500px;float:left;display:inline"></div>
<div id="city" style="width: 500px;height:500px;float:left;display:inline"></div>

<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var sex = echarts.init(document.getElementById('sex'));
    var date = echarts.init(document.getElementById('date'));
    var city = echarts.init(document.getElementById('city'));

    //数据展示
    $.ajax({
        url: "${pageContext.request.contextPath}/user/showData",
        success: function (data) {
            //性别
            var option1 = {
                title: {
                    text: '持明法洲用户性别人数对比'
                },
                tooltip: {},
                legend: {
                    data: '人数'
                },
                isualMap: {
                    show: false,
                    min: 80,
                    max: 600,
                    inRange: {
                        colorLightness: [0, 1]
                    }
                },
                toolbox: {
                    show: true,
                    orient: 'vertical',
                    left: 'right',
                    top: 'center',
                    feature: {
                        mark: {show: true},
                        dataView: {show: true, readOnly: false},
                        restore: {show: true},
                        saveAsImage: {show: true}
                    }
                },
                series: [{
                    name: '人数',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '50%'],
                    data: data.sex
                }]
            };
            //注册时间
            var option2 = {
                title: {
                    text: '持明法洲用户注册量最近三周的变化'
                },
                tooltip: {},
                legend: {
                    data: '注册量'
                },
                toolbox: {
                    show: true,
                    orient: 'vertical',
                    left: 'right',
                    top: 'center',
                    feature: {
                        mark: {show: true},
                        dataView: {show: true, readOnly: false},
                        restore: {show: true},
                        saveAsImage: {show: true}
                    }
                },
                xAxis: {
                    type: 'category',
                    data: ["最近三周", "最近两周", "最近一周"]
                },
                yAxis: {type: 'value'},
                series: [{
                    name: '注册量',
                    type: 'line',
                    data: [data.date[0].dateNum, data.date[1].dateNum, data.date[2].dateNum],
                    smooth: true
                }]
            };

            //地区
            var option3 = {
                title: {
                    text: '持明法洲用户全国的地区分布'
                },
                tooltip: {trigger: 'item',},
                legend: {
                    data: '用户人数'
                },
                toolbox: {
                    show: true,
                    orient: 'vertical',
                    left: 'right',
                    top: 'center',
                    feature: {
                        dataView: {readOnly: false},
                        restore: {},
                        saveAsImage: {}
                    }
                },
                visualMap: {
                    min: 800,
                    max: 50000,
                    text: ['High', 'Low'],
                    realtime: false,
                    calculable: true,
                    inRange: {
                        color: ['lightskyblue', 'yellow', 'orangered']
                    }
                },
                series: [{
                    name: '用户人数',
                    type: 'map',
                    mapType: 'china',
                    itemStyle: {
                        normal: {label: {show: true}},
                        emphasis: {label: {show: true}}
                    },
                    data: data.province
                }]
            };

            // 使用刚指定的配置项和数据显示图表。
            sex.setOption(option1);
            date.setOption(option2);
            city.setOption(option3);
        }
    });


</script>
</body>
</html>
